require("../assets/fonts/iconfont");
require("../assets/fonts/iconfont.css");
const axios = require("axios");
/**
 * DOM 操作封装
 */

//获取单个DOM节点
function $(selector) {
    return document.querySelector(selector)
}

//获取多个DOM节点
function $$(selector) {
    return document.querySelectorAll(selector)
}

//封装文档加载事件
/* 
    区别:
        load: 让所有资源加载完成后,才能执行js代码
        DOMContentLoaded: 只要DOM加载完成后,就可以执行js代码
*/
function ready(callback) {
    window.addEventListener('DOMContentLoaded', function() {
        //当前页面的具体功能
        callback(); //把 使用时function中的功能全部执行到这个位置
    })
}
//页面点击跳转功能
function jump(dom,link) {
    addEvent(dom,function() {
        document.location.href = link;
    })
}
//页脚渲染
function footer(active = "home") {
    let footer = document.createElement('footer');
    let html = `
    <div class="${active=="home"?active:""}">
            <a href="/home.html">
                <span class="iconfont icon-home"></span>
            </a>
            <a href="/home.html">首页</a>
    </div>
    <div class="${active=="run"?active:""}">
            <a href="sports.html">
                <span class="iconfont icon-sport"></span>
            </a>
            <a href="#">运动</a>
    </div>
    <div class="${active=="circle"?active:""}">
            <a href="/circle.html">
                <span class="iconfont icon-circle"></span>
            </a>
            <a href="/circle.html">圈子</a>
     </div>
    <div class="${active=="my"?active:""}">
            <a href="/my.html">
                <span class="iconfont icon-mine"></span>
            </a>
            <a href="/my.html">
                <span>我的</span>
            </a>
    </div>
    `;
    $("body").append(footer)
    footer.innerHTML = html;
};
// 运动页面头部渲染
function header(ojb) {
    let element = document.createElement('header');
    element.className = 'sportsheader'
    element.innerHTML = `
    <div>
        <ul class="df txtcter fon16" id='sportsHeader'>
            <li class="${ojb==='running' ? 'active' : ''}" id="run">跑步</li>
            <li class="${ojb==='cycling' ? 'active' : ''}" id="cycle">骑行</li>
            <li class="${ojb==='practice' ? 'active' : ''}" id="pract">课程训练</li>
        </ul>
    </div>
    `
    document.body.append(element);
}
// 运动页面头部跳转
function sportsHeadJump() {
    let nodes = $('#sportsHeader').children;
    let arr = ['sports.html','sportsCycling.html','sportsPractice.html'];
    for (let i = 0; i < nodes.length; i++) {
        nodes[i].addEventListener('click',() => {
            location.href = arr[i]
        })
    }
}
//绑定事件,默认点击
function addEvent(node,callback,type='click') {
    $(node).addEventListener(type, (e) => {
        callback(e)
    })
}
//判断是否有token
let token = JSON.parse(localStorage.getItem("token"));
axios.interceptors.request.use(config => {
    // 获取token

    // 判断
    if (token) {
        config.headers.Authorization = "Bearer " + token;
    } else {
        location.href = "/login.html";
        console.log("你没有token");
    }
    return config;
}, err => {
    return Promise.reject(err);
})

if (!token) location.href = "/login.html";

//导出
module.exports = {
    $,
    $$,
    footer,
    ready,
    addEvent,
    header,
    jump,
    sportsHeadJump
}